/**
 * Created by 30947 on 2018/7/18.
 */
// script.js  


$(function () {
  char1()
  // char2()
  char3()
  char4()

})
// 统计分析图

function char1() {
  // var myChart = echarts.init($('#char1')[0])

  var char1 = function (res) {
    var myChart = echarts.init(document.getElementById("char1"));
    var option = {
      // grid: {
      //   left: '3%',
      //   right: '1%',
      //   bottom: '3%',
      //   containLabel: true
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        textStyle: {
          color: 'white'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          textStyle: {
            color: 'white' // 设置字体颜色为白色
          }
        },
        data: res.map(item => item.year)
      },
      yAxis: [{
        type: 'value',
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          }
        },
        axisLabel: {
          textStyle: {
            color: 'white' // 设置字体颜色为白色
          }
        },
        data: res.map(item => item.new),
      }],

      series: [

        {
          name: '新能源汽车',
          type: 'bar',
          barWidth: '35%',
          itemStyle: {
            // 修改柱子圆角,可以修改不同大小值，看圆角效果
            barBorderRadius: 6,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(217,255,0,0.98)' // 红色渐变
            }, {
              offset: 1,
              color: 'rgba(255,191,0,0.97)' // 蓝色渐变
            }])
          },
          data: res.map(item => ({ value: item.new, name: item.category_1 })),
        },
        {
          name: '所有汽车',
          type: 'bar',
          barWidth: '35%',
          itemStyle: {
            // 修改柱子圆角,可以修改不同大小值，看圆角效果
            barBorderRadius: 7,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(0,225,255,0.98)' // 红色渐变
            }, {
              offset: 1,
              color: 'rgba(0,255,196,0.97)' // 蓝色渐变
            }])
          },
          data: res.map(item => ({ value: item.all, name: item.year })),
        }
      ]
    };
    myChart.setOption(option);
    let lastIndex = 0;
    let currentIndex = 0;
    setInterval(() => {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: lastIndex,
      });
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex,
      });
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex,
      });
      lastIndex = currentIndex;
      ++currentIndex;
      if (currentIndex > 10) {
        currentIndex = 0;
      }
    }, 1000);

  }
  $.ajax({
    url: '/eval',
    method: 'POST',
    data: {
      sql: 'select * from ads_car_yearly;',
    },

    success: char1
  });
}

function showTable(type) {
  var best = $('#best');
  var worst = $('#worst');
  var tbody;
  var sqlQuery;

  if (type === 'best') {
    best.show();
    worst.hide();
    tbody = $('#best-tbody');
    sqlQuery = 'select * from ads_car_rank';
  } else if (type === 'worst') {
    best.hide();
    worst.show();
    tbody = $('#worst-tbody');
    sqlQuery = 'select * from ads_car_worst';
  }

  $.ajax({
    url: '/eval',
    method: 'POST',
    data: { sql: sqlQuery },
    success: function (res) {
      tbody.empty(); // 清空tbody中的现有内容  

      $.each(res, function (index, row) { // 遍历返回的数据  
        var tr = $('<tr></tr>'); // 创建一个新的<tr>元素  

        $.each(row, function (key, value) { // 遍历对象的每个属性  
          var td = $('<td></td>').text(value); // 创建一个新的<td>元素并设置文本内容  
          tr.append(td); // 将<td>添加到<tr>中  
        });

        tbody.append(tr); // 将整行<tr>添加到<tbody>中  
      });
    },
    error: function (xhr, status, error) {
      console.error("AJAX 请求失败: " + error);
    }
  });
}

// 页面加载时默认显示“最好”的表格  
$(document).ready(function () {
  showTable('best');
});

function char3() {
  let myChartdata
  var myChart = echarts.init($('#char3')[0])
  $(function(){
    $.ajax({   //2、发送给后端
      url: "http://localhost:8080/getQicoInfoDefulte", 
      type: 'GET',  //设置发送的方式 这里假设为POST
      dataType: "json", 
      data: {CityName: "上海"},  //把选中的标题发给后端
      success:function(data) {
        console.log(data[0]["a14"])
        option = {
         
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            // top:'5%',
              textStyle: {
                color: '#fff'
              }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['2014','2015','2016', '2021', '2022', '2023'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            { 
              barWidth:'50%',
              color: ['#80FFA5', '#00DDFF', '#37A2FF','#80FFA5', '#00DDFF', '#37A2FF'],
              type: 'bar',
              data: [data[0]["a14"],data[0]["a15"],data[0]["a16"],data[0]["a21"],data[0]["a22"],data[0]["a23"]]
            }
          ]
        };
      
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        myChartdata=data
          // 4、这里写成功后更新页面的操作
      }
  })
  })
  $(".city").change(function() {
    var title = $(this).text();  // 1、获取选择下拉框的标题
    console.log(title)
    var id  = $(this).val(); 
    console.log(id)
    var url   = "http://localhost:8080/getQicoInfo";  //这里填写后端的url 
    $.ajax({   //2、发送给后端
        url: url, 
        type: 'GET',  //设置发送的方式 这里假设为POST
        dataType: "json", 
        data: {CityName: id},  //把选中的标题发给后端
        success:function(data) {
          console.log(data)
          option = {
      
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              // top:'5%',
                textStyle: {
                  color: '#fff'
                }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: ['2014','2015','2016', '2021', '2022', '2023'],
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            series: [
              {
                color: ['#80FFA5', '#00DDFF', '#37A2FF','#80FFA5', '#00DDFF', '#37A2FF'],
                type: 'bar',
                data: [data[0]["a14"],data[0]["a15"],data[0]["a16"],data[0]["a21"],data[0]["a22"],data[0]["a23"]]
              }
            ]
          };
        
          myChart.setOption(option)
            // 4、这里写成功后更新页面的操作
        }
    })
});
  myChart.on('click', function (param) {
    setTimeout(function () {
      location.href = ''
    }, 20000)
  })
  
}
function char4() {
  var char4 = function (res) {
    var myChart = echarts.init(document.getElementById("char4"));
    var option = {
      color: [
        '#73FF73',
        '#FFFF82',
        '#FFB973',
        '#FF7373',
        '#AF7373',
        '#A38CCB'
    ],
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        textStyle: {
          color: "white"
        },
        data: ['2014', '2015', '2016', '2021', '2022', '2023']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['上海', '杭州', '深圳', '广州', '成都', '北京', '苏州', '重庆', '郑州', '天津'],
        axisLabel: {
          interval: 0,
          rotate: 60,//倾斜度 -90 至 90 默认为0
          margin: 4,
          textStyle: {
            fontWeight: "bolder",
            color: "white"
          }
        }

      },
      yAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: 'white' // 设置字体颜色为白色
          }
        }
      },
      series: [
        {
          name: '2014',
          type: 'line',
          stack: 'Total',
          data: [{ value: res[0].c2014, name: res[0].c2014 },
          { value: res[1].c2014, name: res[1].c2014 },
          { value: res[2].c2014, name: res[2].c2014 },
          { value: res[3].c2014, name: res[3].c2014 },
          { value: res[4].c2014, name: res[4].c2014 },
          { value: res[5].c2014, name: res[5].c2014 },
          { value: res[6].c2014, name: res[6].c2014 },
          { value: res[7].c2014, name: res[7].c2014 },
          { value: res[8].c2014, name: res[8].c2014 },
          { value: res[9].c2014, name: res[9].c2014 }
          ]
        },
        {
          name: '2015',
          type: 'line',
          stack: 'Total',
          data: [{ value: res[0].c2015, name: res[0].c2015 },
          { value: res[1].c2015, name: res[1].c2015 },
          { value: res[2].c2015, name: res[2].c2015 },
          { value: res[3].c2015, name: res[3].c2015 },
          { value: res[4].c2015, name: res[4].c2015 },
          { value: res[5].c2015, name: res[5].c2015 },
          { value: res[6].c2015, name: res[6].c2015 },
          { value: res[7].c2015, name: res[7].c2015 },
          { value: res[8].c2015, name: res[8].c2015 },
          { value: res[9].c2015, name: res[9].c2015 }]
        },
        {
          name: '2016',
          type: 'line',
          stack: 'Total',
          data: [{ value: res[0].c2016, name: res[0].c2016 },
          { value: res[1].c2016, name: res[1].c2016 },
          { value: res[2].c2016, name: res[2].c2016 },
          { value: res[3].c2016, name: res[3].c2016 },
          { value: res[4].c2016, name: res[4].c2016 },
          { value: res[5].c2016, name: res[5].c2016 },
          { value: res[6].c2016, name: res[6].c2016 },
          { value: res[7].c2016, name: res[7].c2016 },
          { value: res[8].c2016, name: res[8].c2016 },
          { value: res[9].c2016, name: res[9].c2016 }]
        },
        {
          name: '2021',
          type: 'line',
          stack: 'Total',
          data: [{ value: res[0].c2021, name: res[0].c2021 },
          { value: res[1].c2021, name: res[1].c2021 },
          { value: res[2].c2021, name: res[2].c2021 },
          { value: res[3].c2021, name: res[3].c2021 },
          { value: res[4].c2021, name: res[4].c2021 },
          { value: res[5].c2021, name: res[5].c2021 },
          { value: res[6].c2021, name: res[6].c2021 },
          { value: res[7].c2021, name: res[7].c2021 },
          { value: res[8].c2021, name: res[8].c2021 },
          { value: res[9].c2021, name: res[9].c2021 }]
        },
        {
          name: '2022',
          type: 'line',
          stack: 'Total',
          data: [{ value: res[0].c2022, name: res[0].c2022 },
          { value: res[1].c2022, name: res[1].c2022 },
          { value: res[2].c2022, name: res[2].c2022 },
          { value: res[3].c2022, name: res[3].c2022 },
          { value: res[4].c2022, name: res[4].c2022 },
          { value: res[5].c2022, name: res[5].c2022 },
          { value: res[6].c2022, name: res[6].c2022 },
          { value: res[7].c2022, name: res[7].c2022 },
          { value: res[8].c2022, name: res[8].c2022 },
          { value: res[9].c2022, name: res[9].c2022 }]
        },
        {
          name: '2023',
          type: 'line',
          stack: 'Total',
          data: [{ value: res[0].c2023, name: res[0].c2023 },
          { value: res[1].c2023, name: res[1].c2023 },
          { value: res[2].c2023, name: res[2].c2023 },
          { value: res[3].c2023, name: res[3].c2023 },
          { value: res[4].c2023, name: res[4].c2023 },
          { value: res[5].c2023, name: res[5].c2023 },
          { value: res[6].c2023, name: res[6].c2023 },
          { value: res[7].c2023, name: res[7].c2023 },
          { value: res[8].c2023, name: res[8].c2023 },
          { value: res[9].c2023, name: res[9].c2023 }]
        }
      ]
    };
    myChart.setOption(option);
  
  }
  $.ajax({
    url: '/eval',
    method: 'POST',
    data: {
      sql: 'select * from ads_no2_qi;'
    },

    success: char4
  });
}

